<template>
  <div class="cloud_ranking_box">
    <div class="cloud_ranking" v-if="checkcloud('rank')">
      <div class="rankBox" @click="toRank">
        <div class="rankBox_left">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2Frank.png" class="rankBox_left_img" alt="" />
          <div class="rankBox_left_txt">商品榜第{{ checkcloud("rank") }}名</div>
        </div>
        <div class="rankBox_right">
          <i class="iconfont icon-advertise-next"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["goods_info"],
  data() {
    return {};
  },
  methods: {
    toRank() {
      this.$router.push(this.fun.getUrl("cloud_shop_rank", {}));
    }
  },
  computed: {
    checkcloud(key) {
      return function (key) {
        if (!this.goods_info?.plugin?.cloud_shop) return false;
        if (this.goods_info?.plugin.cloud_shop.hasOwnProperty(key)) {
          return this.goods_info?.plugin.cloud_shop[key];
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.cloud_ranking {
  margin: 0.63rem 0.78rem;
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 0.31rem 0.5rem;
  box-sizing: border-box;
  .rankBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #ffe8e3 0%, #fff5f5 100%);
    border-radius: 1.03rem 1.03rem 1.03rem 1.03rem;
    padding: 0.5rem;
    box-sizing: border-box;
  }
  .rankBox_left {
    .rankBox_left_img {
      width: 1.05rem;
      height: 1.05rem;
    }
    .rankBox_left_txt {
      margin-left: 0.44rem;
      font-weight: 500;
      font-size: 0.88rem;
      color: #f15353;
    }
    display: flex;
    align-items: center;
  }
  .rankBox_right {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ff9479 0%, #fc3c37 100%);
    .icon-advertise-next {
      font-size: 0.9rem;
      color: #ffffff;
      margin-left: 0.15rem;
    }
  }
}
</style>
